<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.frame {
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				width: 600px;
				border: 1px solid black;
				padding: 5px;
			}

			.text {
				display: flex;
				flex-warp: wrap;
				margin-top: 4px;
				gap: 10px;
			}

			.tags {
				background-color: beige;
				border: 1px solid cornflowerblue;
				padding: 4px;
				font-size: 12px;

				color: black;
				cursor: pointer;
				display: inline-block;
				display: flex;
				align-items: center;

			}

			.content {
				width: 400px;
				height: 30px;
				display: flex;
				position: relative;
				border: 0;
				outline: 0;
				-webkit-user-modify: read-write-plaintext-only;

			}

			b {
				padding-left: 5px;
			}
		</style>
	</head>

	<body>
		<div class="frame">
			<div class="text">

			</div>
			<label for="">
				<input class="content" type="text" placeholder="请输入标签，多个标签以逗号分割">
			</label>

		</div>
		<script>
			var oContent = document.querySelector('.content');
			var oFrame = document.querySelector('.frame');
			var oText = document.querySelector('.text');

			oContent.onkeydown = function(event) {
				if (event.keyCode === 13) {
					var content = oContent.value.trim();
					var cs = content.split(',');
					cs.forEach(function(element) {
						console.log(element)
						var tag = `<span class='tags'>${element}<b>x</b></span>`;
						oContent.value = ''
						oText.insertAdjacentHTML('beforeend', tag);
					})
				}
			};
			oText.onclick = function() {
				var isvalid = event.target.matches('b');
				if (isvalid) {
					event.target.closest('span').remove();
				}
			}
		</script>

	</body>
</html>
